<template>
	<view class="login-container" :style="{ paddingTop: statusBarHeight + 'px' }">
		<!-- 顶部装饰波浪 -->
		<view class="wave-box" :style="{ paddingTop: statusBarHeight + 'px' }">
			<!-- 添加两个波浪图片，设置不同的动画 -->
			<image class="wave wave-1" src="/static/images/wave-1.png" mode="scaleToFill"></image>
			<image class="wave wave-2" src="/static/images/wave-2.png" mode="scaleToFill"></image>
		</view>
		
		<!-- 标题和Logo -->
		<view class="header">
			<!-- <image class="logo" src="/static/images/logo.png" mode="aspectFit"></image> -->
			<text class="title">猪猪记账本</text>
			<text class="subtitle">轻松管理您的财务</text>
			<image class="logo" src="/static/images/AppLogo.png" mode="aspectFit"></image>
		</view>
		
		<!-- 登录表单 -->
		<view class="form-container">
			<view class="input-group">
				<uni-icons type="person" size="25" :color="textColor" style="margin-right: 10rpx;"></uni-icons>
				<input 
					class="input" 
					type="text" 
					v-model="loginForm.username" 
					placeholder="请输入用户名" 
					placeholder-class="placeholder"
				/>
			</view>
			
			<view class="input-group">
				<uni-icons type="locked" size="25" :color="textColor" style="margin-right: 10rpx;"></uni-icons>
				<input 
					class="input" 
					:type="showPassword ? 'text' : 'password'" 
					v-model="loginForm.password" 
					placeholder="请输入密码" 
					placeholder-class="placeholder"
				/>
				<uni-icons :type="showPassword ? 'eye' : 'eye-slash'" size="25" :color="textColor" @click="togglePasswordVisibility"></uni-icons>
			</view>
			
			<button class="login-btn" @click="handleLogin" :disabled="isLoading">
				<text v-if="!isLoading">登 录</text>
				<view v-else class="loading-circle"></view>
			</button>
			
			<view class="options">
				<text class="forget-pwd" @click="forgetPassword">忘记密码?</text>
				<text class="register" @click="goToRegister">注册账号</text>
			</view>
		</view>
		
		<!-- 底部信息 -->
		<view class="footer">
			<text class="copyright">© 2023 个人记账本 版权所有</text>
		</view>
	</view>
</template>

<script>
import { login } from '@/api/apis.js';
import { themeMixin } from '@/utils/theme.js';
import { useUserStore } from '@/store/userStore.js';

export default {
	mixins: [themeMixin], // 混入主题工具
	data() {
		return {
			loginForm: {
				username: '',
				password: ''
			},
			showPassword: false,
			isLoading: false,
			statusBarHeight: 0
		}
	},
	onLoad() {
		// 获取状态栏高度
		this.getStatusBarHeight();
	},
	onShow() {
		// 使用Pinia的store来判断是否已登录
		const userStore = useUserStore();
		const Authorization = uni.getStorageSync('Authorization');
		if (userStore.isLoggedIn && Authorization) {
			uni.navigateTo({
				url: '/pages/index/index'
			});
		}
	},
	methods: {
		// 获取状态栏高度
		getStatusBarHeight() {
			// #ifdef APP-PLUS || MP
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
			// #endif
		},
		
		// 切换密码可见性
		togglePasswordVisibility() {
			this.showPassword = !this.showPassword;
		},
		
		// 登录处理
		async handleLogin() {
			// 表单验证
			if (!this.loginForm.username) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return;
			}
			
			if (!this.loginForm.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			
			this.isLoading = true;
			
			try {
				const res = await login(this.loginForm);
				console.log(res);
				// 登录成功
				if (res.data && (res.data.code === 200 || res.data.code === 1) && res.data.data) {
					// 使用Pinia的store来管理用户状态
					const userStore = useUserStore();
					userStore.loginSuccess(res.data.data);

					// 登录成功提示
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					
					// 跳转到首页
					uni.reLaunch({
						url: '/pages/index/index'
					});
				} else {
					uni.showToast({
						title: res.data?.msg || '登录失败',
						icon: 'none'
					});
				}
			} catch (error) {
				// 错误已经由请求工具统一处理，这里不需要额外处理
				console.error('登录失败:', error);
			} finally {
				this.isLoading = false;
			}
		},
		
		// 忘记密码
		forgetPassword() {
			uni.showToast({
				title: '忘记密码功能开发中',
				icon: 'none'
			});
		},
		
		// 去注册
		goToRegister() {
			uni.navigateTo({
				url: '/pages/register/register'
			});
		}
	}
}
</script>

<style lang="scss">
.login-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: $background-color;
	position: relative;
	
	// 波浪装饰
	.wave-box {
		width: 100%;
		height: 480rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		overflow: hidden;
		background-color: $primary-color;
		
		.wave {
			width: 200%; /* 宽度设为200%以便有足够空间移动 */
			height: 150rpx;
			z-index: 2;
			position: absolute;
			bottom: -10rpx;
			left: 0;
			background-color: $primary-color;
		}
		
		.wave-1 {
			opacity: 1;
			animation: wave-animation 10s infinite linear;
		}
		
		.wave-2 {
			opacity: 1;
			animation: wave-animation 7s infinite linear reverse; /* 反向动画，速度不同 */
		}
	}
	
	// 头部标题和Logo
	.header {
		margin-top: $spacing-xlarge;
		// padding: $spacing-xlarge;
		padding: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		z-index: 2;
		
		.logo {
			width: 160rpx;
			height: 160rpx;
			margin-top: 20rpx;
			border-radius: 50%;
			background-color: $card-background;
			box-shadow: $shadow-large;
			margin-bottom: $spacing-medium;
		}
		
		.title {
			font-size: $font-size-xlarge;
			font-weight: bold;
			color: $text-color-white;
			margin-bottom: $spacing-small;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		}
		
		.subtitle {
			font-size: $font-size-base;
			color: rgba(255, 255, 255, 0.9);
		}
	}
	
	// 表单容器
	.form-container {
		flex: 1;
		padding: $spacing-large;
		// margin-top: $spacing-xlarge;
		z-index: 2;
		
		.input-group {
			@include input-style;
			
			.iconfont {
				font-size: 40rpx;
				color: $primary-color;
				margin-right: $spacing-small;
			}
			
			.input {
				flex: 1;
				height: 100%;
				font-size: $font-size-medium;
			}
			
			.placeholder {
				color: $text-color-lighter;
			}
		}
		
		.login-btn {
			@include button-primary;
			margin-top: $spacing-xlarge;
			
			.loading-circle {
				width: 40rpx;
				height: 40rpx;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
				border-top-color: $text-color-white;
				border-radius: 50%;
				animation: spin 1s linear infinite;
			}
		}
		
		.options {
			@include flex-between;
			margin-top: $spacing-large;
			padding: 0 $spacing-small;
			
			.forget-pwd, .register {
				font-size: $font-size-base;
				color: $primary-color;
			}
		}
	}
	
	// 底部版权信息
	.footer {
		padding: $spacing-large 0;
		text-align: center;
		
		.copyright {
			font-size: $font-size-small;
			color: $text-color-lighter;
		}
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* 波浪动画 */
@keyframes wave-animation {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); } /* 移动半个宽度，因为图片宽度是200% */
}

// 图标字体
@font-face {
	font-family: "iconfont";
	src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAAOYAAsAAAAAB8AAAANLAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDIIJ5ATYCJAMQCwoABCAFhGcHShtpBhHVm5HIvkgwbhrDRRQqFFcPvpj5a+Jh/v3+7XPuvW9m/n+qSTrpdpJokkknk0QSjVRI0EiQJoVE6IQO7+f5bl9QJAuUBXQBlZlJg6ICZWjZCbMTdv7/OWa8NA6sf5fNJaOgowEcJdCAoqJFJOAdyA38D2MXF3GYgGbJBpGjcwvroGCQzwkQV0cGQSGxUgMZqAvVgrVZvEBVnZ6mT+C5//34hyIKJJUMuevw2fEcNP7Mfs5Ltf9r1bgI8OPZwW4jYxNQiIvC4DFyMbGJnGZZfmwHqKtL4mf2c/Zz3v//P7jrldBs/uERSVkQFaRuA7tIZvxMCEjwM5vAr/CzMGDQTKQBbAHiEsY+SZLUNGhQU5QjrZXF6/XOm5sbq9ls1JnNWoPBYDIatdWKwVKtmm02s9VqsdsrNpvFYjFZrSa73VKpmK1Wk0NhrdWMDofVajXa7WaHw2S3G202o91usNn0drvRZjPY7Xq7XWezae12rd2utdmUdrvGbtdYrWq7XWWzKR0OhcOhcjpVTqfS6VQ4nUqnU+VyKl0upculdLkULpfC5ZK7XHK3W+52y9xumdstdbtlHo/U45G53TK3W+rxSD0eicfDeTxcNhvH5eK4XCyXi+FyMVwuhsvFcrlYLhfH5eK4XDyXi+dyCVwugcslcLkELpfA5RK4XAKXS+RyiVwukcslcrlELpfI5ZK4XBKXS+JySVwuicslcbkkLpfM5ZK5XDKXS+ZyyVwumcslc7kULpfC5VK4XAqXS+FyKVwuhculcrlULpfK5VK5XCqXS+VyqVwujculcbk0LpfG5dK4XBqXS+NyaVwuncul/7MKAMCvsQ+A/Lp7APnNGADIL/EAkF8XRnGUb5IDgPxaB4D8pu3/t9Ve9t9ZvwqAT/mEJwDwY1iaFygEJHkpSihI/qshqWvgfyUVDPyMgkq1LFdVk9JIqgHUNSGkGhYhqy1jCnsTKg1dqNTtQdOGwfUtejCIKGwDG44AhC6vIen0HrIub5nC/oRKn++odEUImm6R37JlKmSWFRQjRhKdYn6I2mJJiTItJL6gXM4TSmWR4pwdJnmOY+KcWEKJsGSO4zAkxTgqYolYQrMsy5DIYkmMRZZQjMQSUSwWw1jMYkkpxjIjKIwwiEROYfwgtIVJFKWzUML7F8jJySOoKDtacI4dTPQ8tTDOEZYgRWCRcTgcDJJEcaiCWERYgpZJWQyiSMrCJIyJWAQVI2IiJBaWHZiFsVikohjVjHO9oOm+XgDNmFsuUaLFiCmW2OKoI/4QjQAAAAA=') format('woff2');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-user:before {
	content: "\e7ae";
}

.icon-lock:before {
	content: "\e7c9";
}

.icon-eye:before {
	content: "\e78f";
}

.icon-eye-close:before {
	content: "\e8ff";
}
</style>
